<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            display: flex;
        }

        .card {
            width: 15%;
            padding: 20px;
            margin-left: 3%;
            transition: 0.5s;
        }

        .card img {
            width: 100%;
            border-radius: 50%;
            opacity: 0.4;
        }

        .card img:hover {
            opacity: 1;
        }

        .header:hover+.content p{
            display: block;
        }
        .card a {
            padding: 10px;
            text-decoration: none;
            background-color: red;
            color: white;
            border-radius: 10px;
        }

        .card:hover {
            box-shadow: 0px 5px 5px #888888;
        }

        .content p{
            transition: 3s;
            display: none;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="header">
                <img src="https://picsum.photos/250?random=1" alt="face">
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
                    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
                    voluptatem voluptates, voluptatum!</p>
                <a href="">Read More</a>
            </div>
        </div>

        <div class="card">
            <div class="header">
                <img src="https://picsum.photos/250?random=2" alt="face">
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
                    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
                    voluptatem voluptates, voluptatum!</p>
                <a href="">Read More</a>
            </div>
        </div>
        <div class="card">
            <div class="header">
                <img src="https://picsum.photos/250?random=3" alt="face">
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
                    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
                    voluptatem voluptates, voluptatum!</p>
                <a href="">Read More</a>
            </div>
        </div>
    </div>

</body>

</html>